import { View, Image, Swiper, SwiperItem, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import './index.scss';

export default function ({ imageList = [] }) {
  const [active, setActive] = useState(1);
  const _onChange = (e) => {
    setActive(e.detail.current + 1);
  };
  const viewImage = (index) => {
    Taro.previewImage({
      current: index,
      urls: imageList,
    });
  };
  return (
    <View className="goods-banner-container">
      <Swiper
        className="goods-swiper"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        autoplay
        onChange={_onChange}
      >
        {imageList.map((item, key) => {
          return (
            <SwiperItem key={item}>
              <View className="swiper-item">
                <Image src={item} mode="aspectFit" onClick={() => viewImage(key)} />
              </View>
            </SwiperItem>
          );
        })}
      </Swiper>
      <View className="page-content">
        <Text className="current-text">{active}</Text>/
        <Text className="total-text">{imageList.length}</Text>
      </View>
    </View>
  );
}
